<template>
  <div
    ><PageWrapper :contentFullHeight="true">
      <BasicTable @register="registerTable">
        <!-- 创建时间 -->
        <template #createTime="{ text: createTime }">
          <span>
            {{ proxy.$filters.filterTime(createTime) }}
          </span>
        </template>
        <!-- 开始时间 -->
        <template #startTime="{ text: startTime }">
          <span>
            {{ proxy.$filters.filterTime(startTime) }}
          </span>
        </template>
        <!-- 超期时间 -->
        <template #EstCostTime="{ text: EstCostTime }">
          <span>
            {{ proxy.$filters.filterTime(EstCostTime) }}
          </span>
        </template>
        <!-- 计划结束时间 -->
        <template #EstEndTime="{ text: EstEndTime }">
          <span>
            {{ proxy.$filters.filterTime(EstEndTime) }}
          </span>
        </template>
        <!-- 结束时间 -->
        <template #endTime="{ text: endTime }">
          <span>
            {{ proxy.$filters.filterTime(endTime) }}
          </span>
        </template>
        <template #action="{ record }">
          <TableAction
            :actions="[
              {
                icon: 'ion:ios-trash',
                color: 'error',
                popConfirm: {
                  title: t('common.confirmDelete'),
                  confirm: handleDelete.bind(null, record),
                },
                tooltip: t('common.delete'),
              },
              {
                icon: 'ion:eye-outline',
                onClick: handleView.bind(null, record),
                tooltip: t('common.view'),
              },
              {
                icon: 'ion:download-outline',
                onClick: handleDownload.bind(null, record),
                tooltip: t('routes.table.flowExampleList.exportAnnotation'),
                disabled: record.state == '完成',
              },
              {
                icon: 'ion:pause-outline',
                onClick: handlePause.bind(null, record),
                tooltip: t('common.pause'),
                ifShow: record.state == '运行',
              },
              {
                icon: 'ion:play-outline',
                onClick: handleResume.bind(null, record),
                tooltip: t('common.resume'),
                ifShow: record.state == '暂停',
              },
            ]"
          />
        </template>
      </BasicTable>
      <!-- 引入界面 -->
      <ProcessInstance @register="registerModal" />
      <AnnotationInfo @register="registerAnnotationModal" />
    </PageWrapper>
  </div>
</template>

<script lang="ts" setup>
  import { getCurrentInstance } from 'vue';
  import { PageWrapper } from '/@/components/Page';
  import { BasicTable, useTable, TableAction } from '/@/components/Table';
  import { useI18n } from '/@/hooks/web/useI18n';
  import { useModal } from '/@/components/Modal';
  import {
    GetListWorkflowInstance,
    DeleteWorkFlowInstances,
    ChangeWorkflowState,
    Getpostil,
  } from '/@/api/demo/flow';
  import { flowExampleColumns, flowExampleSearch } from './flowData';
  import { useMessage } from '/@/hooks/web/useMessage';

  import ProcessInstance from '/@/views/components/ProcessInstance.vue';
  import AnnotationInfo from './AnnotationInfo.vue';

  const { t } = useI18n();
  const { proxy }: any = getCurrentInstance();
  const { createMessage } = useMessage();
  // 删除
  const handleDelete = async (record) => {
    await DeleteWorkFlowInstances(record.id);
    createMessage.success(t('common.delSuccessText'));
    reload();
  };

  // 查看
  const handleView = (record) => {
    openPrecessModal(true, { wfInsId: record.id });
  };

  // 下载
  const handleDownload = async (record) => {
    const res = await Getpostil(record.id);
    openAnnotationModal(true, { record: record, result: res });
  };

  // 暂停
  const handlePause = async (record) => {
    await ChangeWorkflowState(record.id, record.actor);
    createMessage.success('暂停成功');
    reload();
  };

  // 恢复
  const handleResume = async (record) => {
    await ChangeWorkflowState(record.id, record.actor);
    createMessage.success('恢复成功');
    reload();
  };

  // 表格初始化
  const [registerTable, { reload }] = useTable({
    titleHelpMessage: 'flowExampleIndex',
    api: GetListWorkflowInstance,
    columns: flowExampleColumns(),
    bordered: true,
    useSearchForm: true,
    formConfig: flowExampleSearch(), // 表单配置
    showIndexColumn: false,
    showTableSetting: true, // 显示表格设置工具
    tableSetting: { fullScreen: true }, // 表格设置工具配置
    striped: true,
    // 分页配置
    pagination: { pageSize: 20, pageSizeOptions: ['20', '40', '60', '80'], defaultPageSize: 20 },
    canResize: true,
    fetchSetting: {
      // 当前页传递给后台的字段名称
      pageField: 'pageNumber',
      sizeField: 'pageSize',
      listField: 'data',
      totalField: 'totalCount',
    },
    actionColumn: {
      width: 150,
      title: t('common.action'),
      dataIndex: 'action',
      slots: { customRender: 'action' },
    },
  });

  const [registerModal, { openModal: openPrecessModal }] = useModal();

  const [registerAnnotationModal, { openModal: openAnnotationModal }] = useModal();
</script>

<style lang="less" scoped>
  ::v-deep(.ant-calendar-picker) {
    width: 100% !important;
  }
</style>
